import React,{useState,useEffect,useMemo,useCallback,useRef,createRef} from 'react'

import {useStorage,useUser} from '../hooks'

function UseStorage(props){
    // console.log('start')
    const [qty,setQty] = useState(1)
    const [page,setPage] = useState(1)

    // let user = localStorage.getItem('user');// string,json,null
    // try{
    //     user = JSON.parse(user) || {}
    // }catch(err){
    //     user = {}
    // }

    // // string
    // const username = useStorage('username')
    // console.log('username',username)

    // // number
    // const password = useStorage('password')
    // console.log('password',password)

    // // json
    // const userInfo = useStorage('userInfo')
    // console.log('userInfo',userInfo)

    const [username,setUsername] = useStorage('username')

    const [user,setUser] = useUser();
    console.log('user',user)

    const changeQty = useCallback(function(){
        setQty(qty+1)
    },[qty])
    const changePage = useCallback(()=>{
        setPage(page+1)
    },[page])

    // console.log('end')
    return (
        <div>
            <h4>useStorage</h4>
            <button onClick={changeQty}>qty: {qty}</button>
            <button onClick={changePage}>page: {page}</button>

            <div>
                {username}
                <button onClick={()=>{
                    setUsername(username+' plus')
                }}>修改</button>
            </div>
        </div>
    )
}

export default UseStorage;